<template>
  <header>
    <div class="header_in banxin tanxin">
      <div class="headerl "><i class="iconfont icon-wangyiyunyinle-"></i></div>
      <div class="center">
        <ul class="tanxin">
          <li class="active">发现音乐</li>
          <li @click="$router.push('/mymusic')">我的音乐</li>
          <li>关注</li>
          <li>商城</li>
          <li>音乐人</li>
          <li>下载客户端</li>
        </ul>
      </div>
      <div class="headerr tanxin">
          
        <input type="text" placeholder="音乐/视频/电台/用户" class="search"/>
        <div class="author">创作者中心</div>
        <a href="javascript:;" @click="goLogin" v-show="!imgshow">登录</a>
        <img :src="userinfo.avatarUrl" alt="" v-show="imgshow" width="30" >
      </div>
    </div>
    <div class="header_footer">
      <div class="header_foot banxin">
          <ul class="nav">
            <li><a href="javascript:;" class="active" @click="$router.push('/')">推荐</a></li>
            <li><a href="javascript:;" @click="$router.push('/list')">排行榜</a></li>
            <li><a href="javascript:;">歌单</a></li>
            <li><a href="javascript:;">主播</a></li>
            <li><a href="javascript:;">电台歌手</a></li>
            <li><a href="javascript:;">新碟上架</a></li>      
          </ul>
      </div>
    </div>
  </header>
</template>

<script>
import {UserInfoApi} from '@/request/api'
export default {
  data() {
    return {
      userinfo:'',
      imgshow:false
    };
  },
  methods:{
    goLogin(){
      return this.$store.commit('ChangeLoginShow','true')
    }
  },
  created(){
    let id =localStorage.getItem('id')
    console.log(id);
    UserInfoApi({id}).then((res)=>{
      console.log(res);
      this.userinfo=res.data.profile
    })
    let token=localStorage.getItem('token')
    if(token){
      this.imgshow=true
    }
  }
  
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base";
header {
  color: rgb(204, 204, 204);
  height: 85px;
  background: rgb(36, 36, 36);
  box-sizing: border-box;
  margin-bottom: 14px;
  .header_in {
    font-size: 14px;
    align-items: center;
    height: 65px;
 
    .headerl{
        cursor: pointer;
        i{
              font-size: 65px;
        }
         
    }
    ul{
        li{
            padding:0 20px ;
            height: 65px;
            line-height: 65px;
            cursor: pointer;
            
            &.active{
                background-color: #000;
                color: #fff;
            }
        }
    }
    .headerr{
       align-items: center;
      .search{
          height: 30px;
         margin-right: 10px;
         border-radius: 0 20px 20px 0;
         text-indent: 2em;
      }
      .author{
          margin-right: 10px;
          padding:5px 10px;
          border: 1px solid #ccc;
          border-radius:17px;
      }
      a{
          color: rgb(204, 204, 204);
      }
    }
  }
  .header_footer{
   
    background: #c20c0c;
    .header_foot{
      .nav{
        display: flex;
        width: 744px;
        height: 34px;
        margin: 0 auto;
        li{
        box-sizing: border-box;
        padding: 0 30px;
         line-height: 34px;
         text-align: center;
         margin-left: -10px;
         a{
           color: #fff;
           font-size: 12px;
           box-sizing: border-box;
          
         }
        }
      }
    }
  }
}
</style>